import { Button, Form, Input } from 'antd';
import { useMemo, useState } from 'react';
import { YmTable, YmTablePorps } from 'ym-design';

// 表格字段类型
type TableRecord = {
  name: string;
  age: number;
  gender: '男' | '女';
  email: string;
  address: string;
  create_time: string;
  guid: string;
};
// 查询字段类型
type SearchValue = {
  name: string;
  gender: string;
};

const mockData = new Array(100).fill(1).map<TableRecord>((v, index) => {
  return {
    name: `用户${index}`,
    age: Math.floor(Math.random() * 100),
    gender: Math.random() > 0.6 ? '女' : '男',
    email: Math.random() + '@abc.com',
    address: `地址${index}`,
    create_time: '随机时间',
    guid: `dasklfjaf${index}`,
  };
});

export default function () {
  const defaultColumns = useMemo<
    YmTablePorps<TableRecord, SearchValue>['columns']
  >(
    () => [
      {
        dataIndex: 'name',
        title: '姓名',
        key: 'name',
        fixed: 'left',
        width: 80,
      },
      {
        dataIndex: 'age',
        title: '年龄',
        key: 'age',
        width: 100,
      },
      {
        dataIndex: 'gender',
        title: '性别',
        key: 'gender',
        width: 80,
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        key: 'email',
        width: 300,
      },
      {
        dataIndex: 'address',
        title: '地址',
        key: 'address',
        width: 300,
      },
      {
        dataIndex: 'create_time',
        title: '创建时间',
        key: 'create_time',
        width: 300,
      },
    ],
    [],
  );

  const [columns, setColumns] =
    useState<YmTablePorps<TableRecord, SearchValue>['columns']>(defaultColumns);

  //列显示回调函数
  const handleColumnsChage = (newColumns: any[], type: any) => {
    if (type.type !== 'reset') {
      setColumns(newColumns);
    } else {
      setColumns(defaultColumns);
    }
  };

  const [outParams, setOutParams] = useState<{ address?: string }>({});

  return (
    <div>
      <h2>外部参数查询表格</h2>
      <Form<{ address?: string }>
        onFinish={(value) => {
          setOutParams(value);
        }}
        layout="inline"
        labelCol={{ style: { width: 80 } }}
      >
        <Form.Item label="地址" name="address">
          <Input></Input>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <YmTable<TableRecord, SearchValue>
        columns={columns}
        rowKey="guid"
        searchForm={{
          formItems: [
            {
              name: 'name',
              label: '名称',
              valueType: {
                type: 'input',
              },
            },
            {
              name: 'gender',
              label: '性别',
              valueType: {
                type: 'select',
                selectProps: {
                  options: [
                    {
                      label: '男',
                      value: '男',
                    },
                    {
                      label: '女',
                      value: '女',
                    },
                  ],
                },
              },
            },
          ],
        }}
        toolBar={{
          onColumnsChange: handleColumnsChage,
        }}
        request={async ({ page = {} }, searchValue) => {
          const { pageIndex = 1, pageSize = 10 } = page;

          await new Promise((resolve) => {
            setTimeout(() => resolve(1), 2000 * Math.random());
          });

          const start = (pageIndex - 1) * pageSize;
          const end = start + pageSize;

          let result = mockData
            .filter((v) => {
              return (
                v.name.includes(searchValue?.name ?? '') &&
                v.gender.includes(searchValue?.gender ?? '') &&
                v.address.includes(outParams.address ?? '')
              );
            })
            .map((v) => ({ ...v }));

          return {
            list: result.slice(start, end),
            total: result.length,
          };
        }}
        requestOptions={{
          reFreshDep: [outParams],
        }}
      />
    </div>
  );
}
